// 提交排序: 几个分支在前、几个在后
import React from 'react';
import { Balloon } from '@teamix/ui';
import stepPercentFn from './stepPercentFn';
import './index.scss';
import intl from '../../locale';

export default class BranchCommitOrder extends React.Component {
  render() {
    const { info, style, targetBranch } = this.props;
    return (
      <Balloon.Tooltip
        trigger={
          <div className="branch-commit-order" style={style}>
            <div className="branch-commit-order-before">
              <div className="txt">
                <span className="order-badge">{info.behind}</span>
              </div>
              {info.behind === 0 ? (
                <div className="border value-zero"> </div>
              ) : (
                <span>
                  <div className="border" style={{ width: stepPercentFn(info.behind) }}>
                    {' '}
                  </div>
                </span>
              )}
            </div>
            <div className="branch-commit-order-line"> </div>
            <div className="branch-commit-order-after">
              <div className="txt">
                <span className="order-badge">{info.ahead}</span>
              </div>
              {info.ahead === 0 ? (
                <div className="border value-zero"> </div>
              ) : (
                <span>
                  <div className="border" style={{ width: stepPercentFn(info.ahead) }}>
                    {' '}
                  </div>
                </span>
              )}
            </div>
          </div>
        }
        align="t"
      >
        {intl.get(
          {
            id: 'code-assets.components.branchCommitOrder.TargetbranchInfoaheadSubmittedAheadAnd',
            defaultMessage: '超前 {targetBranch} {infoAhead} 个提交，滞后 {infoBehind} 个提交',
          },
          { targetBranch, infoAhead: info.ahead, infoBehind: info.behind },
        )}
      </Balloon.Tooltip>
    );
  }
}
